<template>
    <div class="box">
        <div class="header_box">
            <HeaderView>
                <template v-slot:center>
                    <div class="header_box_main">
                        评价详情
                    </div>
                </template>
            </HeaderView>
        </div>

        <ul>
            <li>订单编号：{{list.commentId}}</li>
            <li>店铺名称：{{list.shopChineseName}}</li>
            <li>顾客昵称：{{list.customerName}}</li>
            <li>配送员：{{list.deleverymanName}}</li>
        </ul>
        <ul>
            <li>商家服务：
                <van-rate v-model="list.merchantServices1" />
            </li>
            <li>配送服务：
                <van-rate v-model="list.merchantServices2" />
            </li>
        </ul>
        <ul>
            <li>推荐商品：{{list.commendGoodsName}}</li>
            <li>点踩商品：{{list.uncommendGoodsName}}</li>
            <li>评价内容：{{list.content}}</li>
            <li>评价图片：{{list.image}}</li>
            <li>评价时间：{{list.commentTime}}</li>
        </ul>
        <ul>
            <li>商家回复：{{list.merchantReply}}</li>
            <li>回复时间：{{list.merchantReplyTime}}</li>
        </ul>
    </div>
</template>

<script>
    import {replyDetailAxios} from '@/https/reply'
    import HeaderView from '@/components/header1View.vue';
    export default{
        data(){
            return{
                commentId:'', //1.id
                list:[]
            }
        },
        components:{
            HeaderView
        },
        created(){
            this.commentId=this.$route.query.detailId;
            replyDetailAxios(this.commentId)
            .then(
                res=>{
                    console.log(res)
                    this.list=res.data
                }
            )
            .catch(
                err=>{
                    console.log(err)
                }
            )
    },
       
    }
</script>
<style scoped>
    *{
        font-size: 15px;
    }
    .header_box_main{
        width: 200px;
        text-align: center;
        margin:0 auto;
    }
    .header_title{
        background-color: rgba(255, 110, 83, 1);
        display: flex;
        align-items: center;
        height: 50px;
        font-size: 16px;
        color: aliceblue;
    }
    .title{
        text-align: center;
        width: 90%;
    }
    span{
        margin-left: 150px;
    }
    ul{
        width: 100%;
        border-top: 1px solid grey;
    }
    li{
        margin: 20px;
    }
    
</style>